<template>
  <div class="box">
    <div class="box1">
      <span>缴费项目</span>
      <input type="text" v-model="title" value="学杂费" />
    </div>
    <div class="box1">
      <span>用户姓名</span>
      <input type="text" v-model="name" value="" @blur="fun()" ref="name"/>
    </div>
    <div class="box1">
      <span>手机号码</span>
      <input type="text" v-model="phone" value="" ref="phone"/>
    </div>
    <div class="box1">
      <span>扣款账户</span>
      <input type="text" v-model="number" value="" />
    </div>
    <div class="box1">
      <span>缴费金额（元）</span>
      <input type="text" v-model="money" value="10" />
    </div>

    <div class="box1">
      <span>身份证号</span>
      <input type="text" v-model="id" value="" placeholder="请输入身份证号"/>
    </div>
    <!-- <div class="box1">
      <span>交易日期</span>
      <select name="" id="">
        <option value="1">01</option>
        <option value="2">02</option>
      </select>
    </div> -->
    <p>缴费项目说明</p>
    <p><input class="check" type="checkbox" />本人已认真阅读并同意以下内容</p>
    <p class="blue">《中国建设银行自动缴费服务授权协议》</p>
    <div class="but">
      <button @click="request()">确认</button>
    </div>
  </div>
</template>

<script>
import { jiaofei } from "@/apis/lifelink1.js";
import { car_xinxi } from "@/apis/user";
export default {
  data() {
    return {
      title: "学杂费",
      phone: "",
      number: "",
      money: "100",
      name: "",
      id: "",
    };
  },
  methods: {
    fun(){
      console.log(this.$refs.name.value)
        car_xinxi({username:this.$refs.name.value}).then((ok)=>{
            console.log(ok.data)
            this.id=ok.data.data.userId
            this.phone=ok.data.data.userTel
            this.number=ok.data.data.tbAccount.accountCard

        })
    },
    request() {
      jiaofei({
        userName: this.name,
        userId: this.id,
        accountCard: this.number,
        money: this.money,
        userTel: this.phone,
        name: this.title,
      }).then((res) => {
        console.log(res.data);
        this.$router.push("/zhifuxiangqing");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.but {
  width: 100%;
  text-align: center;
  > button {
    margin: 0.5rem;
    background-color: rgb(54, 100, 237);
    width: 1rem;
    height: 0.3rem;
  }
}
.box {
  width: 100%;
  > .box1 {
    color: #666;
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0.2rem;
    > input {
      text-align: right;
    }
  }
  > p {
    text-indent: 2em;
    margin: 0.2rem 0;
  }
  > .blue {
    color: blue;
  }
}
.box {
  >div {
    border-bottom: .01rem solid #eee;
  }
  
}
</style>